<template>
  <div class="pay-vue">
    <BackNavigation v-bind:title-info="titleInfo"/>
    <!--<div class="html_service_policy">-->
      <!--<iframe id="iframe" src="https://pay.mingpinjiancai.com/"-->
              <!--frameborder="0"></iframe>-->
    <!--</div>-->
    <ul>
      <li>
        <!--<p>订单编号：{{ orderInfo.id }}</p>-->
        <!--<p>在线支付：¥{{ orderInfo.price.toFixed(2) }}</p>-->
        <p>订单编号：{{ orderId }}</p>
        <p>在线支付：¥{{ price }}</p>
      </li>
      <li v-for="payTypeItem in payTypeList" @click="checkClick(payTypeItem)">
        <img v-bind:src="payTypeItem.icon" alt="">
        <div>
          <p class="pay-type-title">{{ payTypeItem.title }}</p>
          <p>{{ payTypeItem.subTitle }}</p>
        </div>
        <img v-bind:src="payTypeItem.selected ? require('../../assets/img/payment/pay_check_select.png') : require('../../assets/img/payment/pay_check_default.png')" alt="">
      </li>
    </ul>
    <div class="pay-input-container">
      <!--<input type="button" v-bind:value="'确认支付：¥' + orderInfo.price.toFixed(2)" @click="payClick(getSelectedTypeItem)">-->
      <input type="button" v-bind:value="'确认支付：¥' + price" @click="payClick(getSelectedTypeItem)">
    </div>
  </div>
</template>

<script>
  import * as recommend from 'api/recommend'
  import { get_cookie } from 'assets/cookie/cookie'
  import BackNavigation from '../mine/navigation.vue'

  export default {
    name: 'pay_vue',
    components: {
      BackNavigation
    },
//    props: {
//      orderInfo: {
//        type: Object,
//        default: {
//          id: '2018033050989799',
//          price: 240.00
//        }
//      }
//    },
    data () {
      return {
        htmlPage: '',
        titleInfo: {
          leftTitle: '返回',
          title: '支付界面',
          rightTitle: ''
        },
        payTypeList: [
          {
            id: 1,
            title: '微信支付',
            subTitle: '推荐使用微信支付',
            icon: require('../../assets/img/payment/pay_type_weixin.png'),
            selected: true
          }
//          {
//            id: 2,
//            title: '支付宝支付',
//            subTitle: '推荐使用支付宝支付',
//            icon: require('../../assets/img/payment/pay_type_zfb.png'),
//            selected: false
//          }
        ],
        orderId: this.$route.orderId,
        price: this.$route.price,
        isIphone: function () {
          let u = navigator.userAgent
//          let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1 // android
          let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)  // iOS
          return isiOS
        },
        callbackUrl: ''
      }
    },
    computed: {
      getSelectedTypeItem () {
        let selectedItem;
        for (let item of this.payTypeList) {
          if (item.selected) {
            selectedItem = item
          }
        }
        return selectedItem
      }
    },
    methods: {
      getSelectedPayType () {
        let selectedItem;
        for (let item of this.payTypeList) {
          if (item.selected) {
            selectedItem = item
          }
        }
        return selectedItem
      },
      checkClick (payTypeItem) {
        // 调用computed中的计算属性不带小括号；计算属性有缓存，当调用时会获取缓存值，当计算属性更新时才会重新执行去除旧值，存储新值
        // 调用methods的方法需要带小括号；每次调用函数总会重新调用执行
        this.getSelectedTypeItem.selected = false
//        this.getSelectedPayType().selected = false
        payTypeItem.selected = true
      },
      wxPay () {
        this.$indicator.open({
          text: '加载中...',
          spinnerType: 'fading-circle'
        })
        let params = {
          token: get_cookie('key'),
          orderId: this.$route.query.id,
          totalFee: this.$route.query.price,
          callbackUrl: '/pay_result',
          deviceInfo: this.isIphone ? 'iOS_WAP' : 'AND_WAP'
        }
        recommend.payCommodityListOrder(params).then(resault => {
          this.$indicator.close()
          this.nullShow = true
          if (resault.status === 200 && resault.data.data !== null) {
            this.callbackUrl = resault.data.data
            window.location.href = resault.data.data
          } else {
            alert(resault.data)
          }
        }).catch(resault => {
          this.$indicator.close()
          this.nullShow = true
          console.log(resault)
        })
      },
      zfbPay () {
        alert('暂不支持')
      },
      payClick (payTypeItem) {
        if (payTypeItem.id === 1) {
          this.wxPay()
        } else {
          this.zfbPay()
        }
      }
    },
    created () {
//      this.$props.orderInfo.id = this.$route.params.id
//      this.$props.orderInfo.price = this.$route.params.price
//      this.$route.params.orderItem
//      this.$indicator.open({
//        text: '加载中...',
//        spinnerType: 'fading-circle'
//      })
    },
    activated () {
      let params = {
        token: get_cookie('key'),
        orderId: this.$route.query.id
      }
      recommend.getOrderPriceInfo(params).then(resault => {
        if (resault.status === 200 && resault.data.data !== null) {
          this.orderId = resault.data.data.orderId
          this.price = resault.data.data.realPrice
        }
      }).catch(resault => {
        console.log(resault)
      })
//      document.body.style.backgroundColor = 'rgb(233, 233, 233)'
//      let that = this
//      let iframe = document.getElementById('iframe')
//      iframe.style.height = (document.documentElement.clientHeight || document.body.clientHeight) + 'px'
//      iframe.onload = function() {
//        that.$indicator.close()
//      }
    }
  }
</script>


<style lang="scss">
  div.pay-vue {
    padding-top: 44px;
    position: relative;
    /*overflow: scroll;*/
    /*height: auto;*/
    min-height: 100%;
    width: 100%;
    background-color: transparent;

    >ul {
      height: auto;
      width: 100%;
      background-color: transparent;

      >li {
        list-style: none;
        width: 100%;
        height: 56px;
        border-width: 0 0 1px 0;
        border-style: solid;
        border-color: rgb(233, 233, 233);

        >img {
          margin-left: 15px;
          margin-top: 8px;
          float: left;
          width: 40px;
          height: 40px;
          /*max-height: 40px;*/
          /*background-color: red;*/
        }

        >img:last-child {
          margin-right: 15px;
          margin-top: 17px;
          float: right;
          width: 20px;
          height: 20px;
        }

        >div {
          float: left;

          >p {
            margin-top: 5px;
            width: 100%;
            height: 20px;
            line-height: 20px;
            color: rgb(166, 166, 166);
            font-size: 14px;
            padding: 0 15px 0 15px;
            text-align: left;
          }

          >p.pay-type-title {
            font-size: 16px;
            color: rgb(66, 66, 66);
          }
        }
      }

      >li:first-child {
        border-width: 1px 0 1px 0;
        height: 57px;

        >p {
          /*background-color: red;*/
          margin-top: 5px;
          width: 100%;
          height: 20px;
          line-height: 20px;
          color: rgb(66, 66, 66);
          font-size: 14px;
          padding: 0 15px 0 15px;
          text-align: left;
        }
      }
    }

    >div.pay-input-container {
      height: auto;
      width: 100%;
      padding: 30px 15px 0 15px;

      >input {
        position: relative;
        height: 44px;
        width: 100%;
        bottom: 0;
        border-radius: 5px;
        padding: 0 10px 0 10px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        background-color: rgb(27, 162, 232);
        color: white;
        border: 0 solid orange;
        -webkit-appearance: none;  /*去掉苹果的默认UI来渲染按钮*/
      }
    }

    /*>div.html_service_policy {*/
      /*margin-top: 44px;*/
      /*overflow-x: scroll;*/
      /*!*overflow: scroll;*!*/
      /*!*overflow: auto;*!*/
      /*!*white-space:nowrap;*!*/
      /*height: 100%;*/
      /*width: 100%;*/

      /*>iframe {*/
        /*!*position: fixed;*!*/
        /*!*left: 0;*!*/
        /*overflow-x: scroll;*/
        /*!*overflow: scroll;*!*/
        /*-webkit-appearance: none;*/
        /*height: 100%;*/
        /*width: 100%;*/
      /*}*/
    /*}*/
  }
</style>
